<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form v-if="form.sampleFormsArray" label-width="120px" :model="form" label-position="right" ref="formRef"
            :disabled="disabled" :class="{ 'borderNone': disabled }" :rules="formRules" :validate-on-rule-change="false">
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="custId">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">顾客名称</span>
                        </template>
                        <ts-select v-if="!disabled" v-model="form.custNumber" :fileName="custFileName" :input-width="220" 
                            :template="tableProps" :label="form.custName" @updateRow="custChange"></ts-select>
                        <el-input v-else v-model="form.custName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="custMan">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">顾客联系人</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.custMan" allow-create filterable clearable
                            placeholder="请选择：" @change="custManChange" @blur="custBlur">
                            <el-option v-for="item in contactCustList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.custMan"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="联系方式" prop="custPhone">
                        <el-input v-model="form.custPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="邮箱" prop="custManEmail">
                        <el-input v-model="form.custManEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="传真" prop="custFax">
                        <el-input v-model="form.custFax"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="顾客性质" prop="custCharacter">
                        <el-select v-if="!disabled" v-model="form.custCharacter" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.custCharacterList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.custCharacterName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="顾客信誉" prop="custCredit">
                        <el-select v-if="!disabled" v-model="form.custCredit" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.custCreditList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.custCreditName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="custRequire">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">客户要求</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.custRequire" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.custRequireList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.custRequireName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="品质报告" prop="qualityReport">
                        <el-radio-group v-model="form.qualityReport" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.requireList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                        <el-input style="width: 40%;" v-if="form.qualityReport == '1'" v-model="form.qualityReportRequire"
                            class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="moldFee">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">模具费用</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.moldFee" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.moldFeeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.moldFeeName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="sampleFrequency">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">样品次数</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.sampleFrequency" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.sampleFrequencyList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.sampleFrequencyName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="上次结果" prop="previousResult">
                        <el-select v-if="!disabled" v-model="form.previousResult" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.previousResultList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.previousResultName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="sampleForms">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">样品形式</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.sampleFormsArray" multiple clearable collapse-tags
                            placeholder="请选择：">
                            <el-option v-for="item in configData.sampleFormsList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.sampleFormsName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item v-if="custManShow()" label="安全选项" prop="securityItem">
                        <el-radio-group v-model="form.securityItem" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.securityItemList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="estimateMonthRequire">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">预估月需求</span>
                        </template>
                        <el-input v-model="form.estimateMonthRequire">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="terminal">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">端子</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.terminal" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.terminalList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.terminalName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="spring">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">弹簧</span>
                        </template>
                        <el-select v-if="!disabled" v-model="form.spring" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.springList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="form.springName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="amount">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">样品数量</span>
                        </template>
                        <el-input v-model="form.amount" type="number">PCS</el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="sampleNaperiod">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">期望纳期</span>
                        </template>
                        <el-date-picker v-if="!disabled" v-model="form.sampleNaperiod" type="date" value-format="YYYY-MM-DD"
                            placeholder="请选择" />
                        <el-input v-else v-model="form.sampleNaperiod"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                    <el-form-item label="标准/法律法规" prop="legal">
                        <el-radio-group v-model="form.legal" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.requireList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                        <el-input style="width: 50%;" v-if="form.legal == '1'" v-model="form.legalRequire"
                            class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                    <el-form-item label="外观包装" prop="appearancePack">
                        <el-radio-group v-model="form.appearancePack" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.requireList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                        <el-input style="width: 40%;" v-if="form.appearancePack == '1'" v-model="form.appearancePackRequire"
                            class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item prop="salesId">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">业务员</span>
                        </template>
                        <sc-table-select v-if="!disabled" v-model="salesRows" :defaultSelected="form.salesName"
                            :apiObj="apiObj" :fileName="saleFileName" :table-width="700" :props="tableProps"
                            @change="salesChange">
                        </sc-table-select>
                        <el-input v-else v-model="form.salesName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <el-form-item prop="readerIds">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">查看权限人员</span>
                        </template>
                        <sc-table-select :inputWidth="600" v-if="!disabled" v-model="readerRows" multiple 
                            :apiObj="apiObj" :fileName="readerFileName" :table-width="700" :props="tableProps" max-collapse-tags="6"
                            @change="readerChange">
                        </sc-table-select>
                        <el-input v-else v-model="form.readers"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="再次供样原因" prop="againForsampleReason">
                    <el-input style="width: 700px;" v-model="form.againForsampleReason" :autosize="{ minRows: 2 }"
                        type="textarea" />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="营业部确认" prop="salesDeptResult">
                    <el-radio-group v-model="form.salesDeptResult" style="margin-top: -4px;">
                        <template v-for="(item, index) in configData.feasibilityList" :key="index">
                            <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                        </template>
                    </el-radio-group>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, toRefs, reactive } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/sample'
import sysApi from '@/api/model/system'
import tsSelect from '@/components/scSelect/index.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: { type: Object, default: () => { } },
    configData: { type: Object, default: () => { } },
    disabled: { type: Boolean, default: false },
})
const apiObj = ref(sysApi.select.query)
const form = ref({})
const formRef = ref(null)
//联系人相关参数
const contactCustList = ref([])
const contactList = ref([])
const custFileName = ref('ChooseErpCustReport')
const saleFileName = ref('EmployeeReport')
const salesRows = ref({})
const readerRows = ref([])
const readerFileName = ref('EmployeeReport')
const tableProps = {
    label: 'name',
    value: 'id',
}
const formRules = reactive({
})
onMounted(() => {
    form.value = props.modelValue
    if (form.value.readers) {
        let readerNameArr = form.value.readers.split(',')
        form.value.readerIdsArray.forEach((item, index) => {
            let params = {
                name: readerNameArr[index],
                id: Number(item)
            }
            readerRows.value.push(params)
        })

    }
})
const custChange = async (val) => {
    form.value.custFax = val.corpFax
    form.value.custName = val.name
    let params = {
        number: val.number
    }
    let res = await Api.audittable.cust.post(params)
    if (res.code == 200) {
        contactList.value = res.dataList
        contactCustList.value = []
        res.dataList.forEach(element => {
            let parms = {
                value: element.contactMan,
                label: element.contactMan
            }
            contactCustList.value.push(parms)
        });
        salesRows.value = {
            id:res.data.salesId,
            name:res.data.salesName
        }
        form.value.salesId = res.data.salesId
    }

}
const custBlur = (value) => {
    if (value.target.value) {
        form.value.custMan = value.target.value
    }
}
const custManShow = () => {
    if (form.value.sampleFormsArray.includes('01') || form.value.sampleFormsArray.includes('03')) {
        return true
    }
}
const custManChange = (val) => {
    let temp = contactList.value.find(ele => ele.contactMan == val)
    if (temp) {
        form.value.custPhone = temp.phone
        form.value.custManEmail = temp.email1
    }

}
const salesChange = (val) => {
    form.value.salesId = val.id
}
const readerChange = (val) => {
    let arr = []
    val.forEach(item => arr.push(item.id))
    form.value.readerIdsArray = arr
}



</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}

.reader {
    :deep(.el-input__wrapper) {
        width: 300px;
    }
}
</style>

